<template>
  <div class="dateBar-wrap">
    <!-- 时刻 -->
      <transition name="el-zoom-in-bottom">
        <div class="dateBar-time" v-show="curIsShowTimeBar">
          <div class="start-time-icon"><cite class="iconfont icon-shijian"></cite></div>
          <div class="start-time"><i class="el-icon-time"></i>{{curStartTime}}</div>
          <div class="slider slider-time">
            <el-slider v-model="curSlideValueTime" range  show-stops :max="24" :format-tooltip="timeFormatTooltip" @change="handleTime"></el-slider>
          </div>
          <div class="end-time"><i class="el-icon-time"></i>{{curEndTime}}</div>
        </div>
      </transition>
      <!-- 日期 -->
      <div class="dateBar-date">
        <div class="start-date-icon"><cite class="iconfont icon-shijian"></cite></div>
        <div class="start-date"><i class="el-icon-time"></i>{{curStartDate}}</div>
        <div class="slider slider-date" :class="curIsShowTimeBtn ? '':'change'">
           <el-slider v-model="curSlideValue" range :max="curMaxValue" :show-tooltip="true" :format-tooltip="dateFormatTooltip" @change="handleSlider"></el-slider>
        </div>
        <div class="end-date"><i class="el-icon-time"></i>{{curEndDate}}</div>
        <div class="show-time" v-if="curIsShowTimeBtn"><el-button type="info" plain size="mini" @click="showTime">按时间</el-button></div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'dateBar-wrap',
  computed:{
    curIsShowTimeBar:{
      get(){
        return this.$store.getters['timebar/curIsShowTimeBar']
      },
      set(val){
        this.$store.state.timebar.isShowTimeBar = val
      }  
    },
    curIsShowTimeBtn(){
      return this.$store.getters['timebar/curIsShowTimeBtn']
    },
    // 日期
    curStartDate:{
      get(){
        return this.$store.getters['date/curStartDate']
      },
      set(val){
        this.$store.state.date.startDate = val
      } 
    },
    curEndDate:{
      get(){
        return this.$store.getters['date/curEndDate']
      },
      set(val){
        this.$store.state.date.endDate = val
      } 
    },
    // 返回的所有日期数组
    curDatebarList(){
      return this.$store.getters['datebar/curDatebarList']
    },
    // 日期 slider
    curSlideValue:{
      get(){
        return this.$store.getters['datebar/curSlideValue']
      },
      set(val){
        this.$store.state.datebar.slideValue = val
      }
    },
    // 时刻 slider
    curSlideValueTime:{
      get(){
        return this.$store.getters['timebar/curSlideValueTime']
      },
      set(val){
        this.$store.state.timebar.slideValueTime = val
      }
    },
    // 日期轴的最大日期
    curMaxValue(){
      return this.$store.getters['datebar/curMaxValue']
    },
     // 三级菜单按钮组
    curBtnGroupActive(){
      return this.$store.getters['curBtnGroupActive']
    },
    // 一级菜单
    defaultMenu(){
      return this.$store.getters.defaultMenu
    },
  },
  watch: {
    curSlideValue(val){
      this.$store.dispatch('date/getStartDate',this.curDatebarList[val[0]])
      this.$store.dispatch('date/getEndDate',this.curDatebarList[val[1]])
    },
    curSlideValueTime:{
      handler(val) {
        let timeArr = [];
        val.map(item=>{
          let timeR = '';
          if (item < 10) {
              timeR = '0' + item + ':00'
          } else {
              timeR = item + ':00'
          }
          timeArr.push(timeR)
        })
      // 只能直接更改时间变量，如果用计算属性（进行监听 通过方法传参数值） 会导致时刻无法选中下拉的具体时间 
        this.curStartTime = timeArr[0]
        this.curEndTime = timeArr[1]
      },
      deep:true
    },
    // 监测三级菜单变化时 重置时间轴 日期轴
    curBtnGroupActive(){
      this.curStartTime = "24:00"
      this.curEndTime = "24:00"
      this.$store.dispatch('timebar/changeValueTime',[24,24]);
    },
    // 监测一级菜单变化时 重置时间轴 日期轴
    defaultMenu(){
      this.curStartTime = "24:00"
      this.curEndTime = "24:00"
      this.$store.dispatch('timebar/changeValueTime',[24,24]);
    }
  },
  data(){
    return {
      curStartTime:'24:00',
      curEndTime:'24:00'
    }
  },
  methods:{
    //  通过数组集合 对滑动条的日期进行处理
    dateFormatTooltip(date) {
      return this.curDatebarList[date]
    },
    timeFormatTooltip(val){
      let timeFormat = '';
      if(val<10){
        timeFormat = '0'+val+':00'
      }else{
        timeFormat = val+':00'
      }
      return timeFormat
    },
    // 日期滑动条获取值
    handleSlider(val){
      val.map(index=>{
        this.$store.dispatch('changeSlideDate',this.curDatebarList[index])
      })
    },
    // 时刻滑动条获取值
    handleTime(val){
      val.map(hour=>{
          this.$store.dispatch('changeSlideTime',hour);
      })
    },
    showTime(){
      this.curIsShowTimeBar = !this.curIsShowTimeBar
    }
  }
  
 
}
</script>
<style lang="stylus" scoped>
@import url("//at.alicdn.com/t/font_1151041_g48qdn3os8v.css")
@import "../../assets/style/date.styl"
@import "../../assets/style/slider.styl"
.dateBar-wrap
  position absolute
  bottom 16px
  left 20px
  width calc(100vw - 30px - 600px)
  z-index 20
  box-shadow 8px 8px 8px rgba(0, 0,0, 0.5)

// 日期
  .dateBar-time
      margin-bottom 10px

.dateBar-date,.dateBar-time
  width 100%
  height 29px
  border-bottom 1px solid #989898
  background #565656
  border-top-left-radius 10px
  display flex

  .start-date-icon,.start-time-icon
    width 30px
    border 1px solid #97989c
    border-right 0
    border-bottom 0
    border-top-left-radius 10px
  
  .start-date,.end-date,.start-time,.end-time
    min-width 120px
    line-height 30px
    text-align left
    padding-right 8px
    background #303030
    border: 1px solid #97989c
    color #e6e6e6
    border-radius 0
    border-bottom 0
    letter-spacing 1px
    font-size 14px
  
  .start-date,.end-date,.start-time,.end-time
    i
      padding 0 5px

  .slider-date
    width calc(100vw - 30px - 710px - 305px)
    padding 0 20px

  .slider-date.change
    width: calc(100vw - 30px - 710px - 221px)

  .slider-time
    width calc(100vw - 30px - 710px - 220px)
    padding 0 20px
  
  .show-time
    margin-left 15px

.icon-shijian
  color #13ffd7

.icon-shijian:before {
    content: "\e62d";
    margin-left: 6px;
    margin-top: 5px;
    display: inline-block;
}
</style>



